<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height:2000px;
        }
    </style>
</head>
<body>
    <h1>节流</h1>
    <h1>节流</h1>
    <h1>节流</h1>
    <h1>节流</h1>
    <input type="text" id="input">

    <script>
        //节流原理，N秒内仅执行一次
        //作用于鼠标事件
        function flow(fn ,delay = 1000){
            var lastTime = 0  //假设最后一次为0
            return function(){
               var timeNow = Date.now() 
               //现在的时间-最后一次执行时间
               if(timeNow-lastTime >= delay){
                //fn没有调用者，默认为window，需要修改this指向call-apply-bind
                fn.apply(this,arguments)
                //修改最后一次的时间
                lastTime = timeNow
               }
            }
        }
        document.onscroll = flow(
            function(event){
            console.log('zhixi')
            console.log(this)
            console.log(event)
        }
        )


        //  防抖，n秒内执行多次，后者会覆盖前者执行
            function once(fn,delay = 1000){
                var timer
                return function(){
                    clearTimeout(timer)
                    var context = this
                    var arg = arguments
                 timer= setTimeout(function(){
                   
                    //多层函数会修改this，延时器时指向window，子函数this指向keyup事件，需保存子函数的this 闭包原理
                        fn.apply(context,arg)
                    },delay)
                }
            }
        var input = document.getElementById('input')
        input.onkeyup = once(
            function(event){
            console.log('zhixing')
            console.log(this)
            console.log(event)
            }
        )
       
    </script>
</body>
</html>